<template>
  <div class="song-sheet" @click="onMusicList(songSheet)">
    <div>
      <div v-lazy :style="{backgroundImage: `url(${songSheet.img})`}"></div>
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tingshu"></use>
        </svg>
        {{ songSheet.playCount }}
      </div>
    </div>
    <div>
      <span>{{ songSheet.title }}</span>
    </div>
  </div>
</template>

<script>
import {useRouter} from "vue-router";

export default {
  name: "SongSheet",
  description: {
    // 歌单详情
  },
  props: {
    songSheet: {
      type: Object,
      default: () => {
        return {
          id: "1kbqjc6",
          title: "【怀旧经典】一人一首成名曲",
          user: "明月清风Yi",
          playCount: "16472.6万",
          img: "https://imgessl.kugou.com/custom/150/20200608/20200608211130632757.png"
        }
      }
    }
  },
  setup() {
    const router = useRouter();

    function onMusicList(songSheet) {
      //根据歌单id请求歌曲
      songSheet.type = "net"
      router.push({
        name: "songSheet",
        query: {
          ...songSheet
          //songSheet: JSON.stringify(songSheet),
        }
      })
    }

    return {
      onMusicList,
    }
  }
}
</script>

<style scoped lang="less">

@import url("@/assets/less/1.less");

@size: 200px;

.song-sheet {
  width: @size;

  & > div:nth-child(1) {
    position: relative;
    width: @size;
    height: @size;

    &:hover {
      &::before {
        position: absolute;
        width: @size;
        height: @size;
        background-image: url("./images/music.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 45px;
        border-radius: 1rem;
        content: "";
        background-color: rgba(0, 0, 0, .5);
      }

      & > div:nth-child(2) {
        visibility: hidden;
      }
    }

    & > div:nth-child(1) {
      width: @size;
      height: @size;
      background-size: @size;
      border-radius: 1rem;
    }

    & > div:nth-child(2) {
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 2px 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      background-color: @fc;
      border-radius: 1rem;
      color: @ffc;

      svg {
        .icon-min(@c: @ffc)
      }
    }
  }

  & > div:nth-child(2) {
    display: inline-block;
    margin-top: 5px;
    height: 42px;
    // 超过部分隐藏
    overflow: hidden;
    // 超过部分用...代替
    text-overflow: ellipsis;
    color: @ffc;
    /*border: 1px solid red;*/
  }
}
</style>
